文章選自

作者：zollero

連接：https://juejin.im/post/6859125809655840776

原文連結：https://zhuanlan.zhihu.com/p/42630013

來源：掘金

JSON.stringify

通常用途：

比方說深拷貝可能會用到，又或者是在使用localstorage時候，因為僅能儲存字符串格式，所以我們會透過JSON.stringify將對象轉成JSON字符串

MDN：

普通例子

// 以下擷取自MDN
JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.stringify({x: 5, y: 6});              
// "{"x":5,"y":6}"

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
// '[1,"false",false]'

JSON.stringify({x: undefined, y: Object, z: Symbol("")}); 
// '{}'

JSON.stringify([undefined, Object, Symbol("")]);          
// '[null,null,null]' 

replacer為函數

// 函數當replacer
function replacer(key, value) {
  if (typeof value === "string") {
    // 等於把那個鑑值對抹消
    return undefined;
  }
  return value;
}

var foo = {
  age: 18,
  height: 1.75,
  name: 'Mike',
  gender: '男'
};
var jsonFoo = JSON.stringify(foo, replacer);

console.log(typeof jsonString); // string
console.log(jsonString); // '{ "age": 18, "height": 1.75 }'

replacer為array

var foo = {
  age: 18,
  height: 1.75,
  name: 'Mike',
  gender: '男'
};

// 只保留height以及gender屬性
let jsonFoo = JSON.stringify(foo, ['height', 'gender']);
console.log(jsonFoo); // '{"height":1.75,"gender":"男"}'

toJSON 方法

擷取自MDN

用Set 來實現數組去重

Set是在ES6引入，結構與Array很像，且可以互相轉換，且Set中的元素只會出現一次，即Set中的元素是唯一的。

基礎邏輯：

// 利用Symbol值為唯一的特性
let arr = [1, 5, 10, 5, 6, 3, 1]
let setArr = new Set(arr)
console.log(setArr);
console.log(...setArr)
console.log([...setArr]);　// 解構賦值setArr並轉換成陣列

函數參數值校驗

利用ES6增加的函數參數默認值這個特性去進行巧妙的參數較驗

先來個小例子

function fix(a = getA()) {
  console.log('傳入的值: ', a)
}

function getA() {
  console.log('getA被調用了')
  return 'getA返回值'
}
// 目前a參數為2
fix(1);
// 沒有傳入參數，因此調用了getA函數
fix();

參數校驗例子

function fix(a = require()) {
  console.log('a', a)
}

function require() {
  throw new Error('缺少了參數 a')
}

fix(1);
// a 1

fix();
// Uncaught Error: 缺少了参数 a

用解構賦值過濾對象屬性

// 透過解構賦值得到對向的深層屬性值
const class308 = {
  name: 'class 308',
  student: {
    first: 'Mike',
    second: 'Mary',
    third: 'Tom'
  }
};
// 這裡使用了ES6的對象增強寫法，{third: third}
const getThirdStu = ({ name, student: { third } }) => {
  console.log(`name: ${name}, third: ${third}`);
}

getThirdStu(class308); // name: class 308, third: Tom

擴展運算符合併對象

例子一

// 利用擴展運算符合併對象，後面的對象會覆蓋前面重複的屬性
let foo = {
  age: 18,
  height: 1.75,
  name: 'Mike',
  gender: '男'
};
let bar = {
  // 這裡會覆蓋掉foo的age跟gender
  age: 17,
  gender: '女',
  weight: 72
}
const mergeFooBar = { ...foo, ...bar };
console.log(mergeFooBar); // {age: 17, height: 1.75, name: "Mike", gender: "女", weight: 72}

例子二

let foo = {
  age: 18,
  height: 1.75,
  name: 'Mike',
  gender: '男'
};
let bar = {
  // 這裡會覆蓋掉foo的age跟gender
  age: 17,
  gender: '女',
  new: {egg: 10, c: {d: 3, ...foo}}
}
const mergeFooBar = { ...foo, ...bar };
console.log(mergeFooBar); 

使用===取代==

詳情參考 Day 22 [其他03] js隱式轉換相關知識